import { withRouter,Link  } from 'react-router';
import { Component } from 'refast';
import logic from './logic';
import './PageXmmx.less';
import { spjkServer } from './../../app/variables';
import Grid from 'uxcore-grid';
import {Row, Col} from 'uxcore-grid';
import Tabs  from 'uxcore-tabs';
import Dialog from 'uxcore-dialog';
import Tooltip from 'uxcore-tooltip';
import Table from 'uxcore-table';
import ry from './../../images/ry.png';
import Sgxk from './../../components/sgxk'
import Message from 'uxcore-message';
import EmptyData from 'uxcore-empty-data';
import Steps, { Step } from 'uxcore-steps';
import ReactEcharts from 'echarts-for-react';

import { NO_DATA_HYPHEN } from '../../common/constants';

class PageXmmx extends Component {

  constructor(props) {
    super(props, logic);
    this.okModal = this.okModal.bind(this);
    this.hideModal = this.hideModal.bind(this);
    this.gcTitleClick = this.gcTitleClick.bind(this);
  }

  onMxClick(rowData, lx) {
    this.dispatch(['viewMx', 'showModal'], rowData, lx);
  }

  okModal() {
    this.dispatch('hideModal');
  }

  hideModal() {
    this.dispatch('hideModal');
    Message['clear']('clear', 5);
  }

  componentWillMount() {
    let t = this;
    this.dispatch('initColoums',
      [{dataKey: 'sgxkzh', title: '许可证号', width: 190, ordered: false},
        {dataKey: 'kgrq', title: '开工日期', width: 145, ordered: false},
        {dataKey: 'jgrq', title: '竣工日期', width: 145, ordered: false},
        {
          dataKey: 'action', title: '操作', width: 95, type: "action", actions: [
          {
            title: '明细',
            callback: (rowData) => {

              this.onMxClick(rowData, 'sgxk')
            },
          }]
        }],
      [{
        dataKey: 'action', title: '标段编号', width: 155, type: "action", actions: [
          {
            render: (title, rowData) => { // 定制渲染
              return rowData.bdbh
            },
            callback: (rowData) => {
              this.onMxClick(rowData, 'zbgc')
            },
          }]
      },
        {dataKey: 'conType', title: '发包类型', width: 110},
        {dataKey: 'fbType', title: '招标方式', width: 110},
        {dataKey: 'kbTime', title: '开标时间', width: 190},
      ],
      [{dataKey: 'htbh', title: '合同编号', width: 160, ordered: false},
        {dataKey: 'baType', title: '合同备案类型', width: 140, ordered: false},
        {
          dataKey: 'htjk', title: '合同价款', width: 180, render: function (cellData, rowData) {
          return <div>{cellData}万元</div>
        }
        },
        {
          dataKey: 'action', title: '操作', width: 95, type: "action", actions: [
          {
            title: '明细',
            callback: (rowData) => {
              this.onMxClick(rowData, 'ht')
            },
          }]
        }],
      [{
        dataKey: 'action', title: '项目编号', width: 175, type: "action", actions: [
          {
            title: '明细',
            render: (title, rowData) => { // 定制渲染
              return rowData.coding
            },
            callback: (rowData) => {
              this.onMxClick(rowData, 'xm')
            },
          }]
      },
        {dataKey: 'address', title: '建设地点', width: 240, ordered: false},
        {
          dataKey: 'jhtzze', title: '投资总额', width: 165,
          render: function (cellData, rowData) {
            return <div>{rowData.jhtzze}(万元)</div>
          }
        },
      ],
      [
        {dataKey: 'djh', title: '登记号', width: 170, ordered: false},
        {dataKey: 'ssh', title: '送审号', width: 310, ordered: false},
        {
          dataKey: 'action', title: '操作', width: 95, type: "action", actions: [
          {
            title: '明细',
            callback: (rowData) => {
              this.onMxClick(rowData, 'ts')
            },
          }]
        }],
      [
        {dataKey: 'empName', title: '姓名', ordered: false},
        {dataKey: 'engName', title: '工程名称', ordered: false},
        {dataKey: 'orgName', title: '所属企业', ordered: false},
        {dataKey: 'job', title: '岗位', ordered: false},
        {dataKey: 'date', title: '考勤日期', ordered: false}
      ],
      [
        {dataKey: 'cameraName', title: '摄像头名称', width: 425, ordered: false},
        // {dataKey: 'unitId', title: '摄像头ID', width: 300, ordered: false},
        {
          dataKey: 'action', title: '操作', width: 95, type: "action", actions: [
          {
            title: '观看',
            callback: (rowData) => {
              this.onMxClick({allCamera: t.state.cameraTable.jsxdata.data, selectedCamera: rowData}, 'camera')
            },
          }]
        }
      ]
    );
  }

  componentDidMount() {

    this.dispatch(['jdgc', 'error', 'sgxk', 'zbgc', 'ht', 'ts', 'xm', 'timeline', 'kqjl', 'spjk'], this.props.params);
  }

  shouldComponentUpdate(nextProps, nextState) {
    const thisProps = this.props || {},
      thisState = this.state || {};
    if (Object.keys(thisProps).length !== Object.keys(nextProps).length ||
      Object.keys(thisState).length !== Object.keys(nextState).length) {
      return true;
    }

    for (const key in nextProps) {
      if (thisProps[key] !== nextProps[key]) {
        return true;
      }
    }

    for (const key in nextState) {
      if (thisState[key] !== nextState[key]) {
        return true;
      }
    }
    return false;
  }

  gcTitleClick() {
    this.props.onGcTitleClick(this.state.jdgc.id);
  }

  render() {

    let t = this;
    let jdgc = this.state.jdgc;
    let dialogNr;

    switch (this.state.showDialogLx) {
      case 'sgxk':
        dialogNr =
          <Sgxk ghxkProps={this.state.ghxkProps} sgxmbProps={this.state.sgxmbProps} jljgProps={this.state.jljgProps}/>;
        break;
      default:
        break;
    }

    const steps = this.state.steps.map(function (s, i) {
      return (
        <Step key={i} title={ <div style={{textAlign:'left'}}>{s.time}</div>}
              description={<div style={{textAlign:'left'}}>{s.title + s.content}</div>}/>
      );
    });

    let timeline = <Tabs.TabPane tab="时间轴" key="0">
      <div className="col_1" style={{height:325, overflow: 'auto'}}>
        <div className="col-md-24"
             style={{marginTop:'20px',marginBottom:'-20px'}}>
          { this.state.steps.length > 0 ?
            <Steps type="title-on-top" maxDescriptionWidth="500" direction="vertical" showIcon={false}
                   current={this.state.steps.length}>{steps}</Steps>
            : <EmptyData/>
          }
        </div>
      </div>
    </Tabs.TabPane>;

    let kqjl = <Tabs.TabPane tab="考勤记录" key="1">
      <div className="col_1" style={{height:325}}>
        <div className="col-md-24">
          <div className="tsxx_mx">
            <i className="kuma-icon kuma-icon-picture"/> 考勤记录
          </div>
          <div className="table_div">
            <Table {...this.state.kqjlProps} ref="kqjlgrid"/>
          </div>
        </div>
      </div>
    </Tabs.TabPane>;

    let xm = <Tabs.TabPane tab="项目信息" key="2">
      <div className="col_1" style={{height:325}}>
        <div className="col-md-24 ">
          <div className="tsxx_mx">
            <i className="kuma-icon kuma-icon-information"/> 项目信息
          </div>
          <div className="table_div">
            <Table {...this.state.xmProps} ref="xmgrid"/>
          </div>
        </div>
      </div>
    </Tabs.TabPane>;

    let ts = <Tabs.TabPane tab="图审信息" key="3">
      <div className="col_1" style={{height:325}}>
        <div className="col-md-24">
          <div className="tsxx_mx">
            <i className="kuma-icon kuma-icon-picture"/> 图审信息
          </div>
          <div className="table_div">
            <Table {...this.state.tsProps} ref="tsgrid"/>
          </div>
        </div>
      </div>
    </Tabs.TabPane>;

    let zbgc = <Tabs.TabPane tab="招标信息" key="4">
      <div className="col_1" style={{height:325}}>
        <div className="col-md-24 ">
          <div className="tsxx_mx">
            <i className="kuma-icon kuma-icon-edit"/> 招标信息
          </div>
          <div className="table_div">
            <Table {...this.state.bdProps} ref="bdgrid"/>
          </div>
        </div>
      </div>
    </Tabs.TabPane>;

    let ht = <Tabs.TabPane tab="合同信息" key="5">
      <div className="col_1" style={{height:325}}>
        <div className="col-md-24 ">
          <div className="tsxx_mx">
            <i className="kuma-icon kuma-icon-file"/> 合同信息
          </div>
          <div className="table_div">
            <Table {...this.state.htProps} ref="htgrid"/>
          </div>
        </div>
      </div>
    </Tabs.TabPane>;

    let sgxk = <Tabs.TabPane tab="施工许可" key="6">
      <div className="col_1" style={{height:325}}>
        <div className="col-md-24">
          <div className="tsxx_mx">
            <i className="kuma-icon kuma-icon-document"/> 施工许可
          </div>
          <div className="table_div">
            <Table {...this.state.sgxkProps} ref="sgxkgrid"/>
          </div>
        </div>
      </div>
    </Tabs.TabPane>;

    let spjk = <Tabs.TabPane tab="视频监控" key="7">
      <div className="col_1" style={{height:325}}>
        <div className="col-md-24 ">
          <div className="tsxx_mx">
            <i className="kuma-icon kuma-icon-information"/> 项目信息
          </div>
          <div className="table_div">
            <Table {...this.state.cameraTable} ref="cameraGrid"/>
          </div>
        </div>
      </div>
    </Tabs.TabPane>;

    return (
      <div className="page-xmmx">
        <Grid fluid={true}>
          <Row className="show-grid">
            <Col xs={24} md={8}>
              <div className="col_1" style={{height:625}}>
                <div className="title title_1">监督工程信息</div>

                <Tooltip
                  placement="right"
                  overlay={
                    <div className="pop_ms">
                      <span>{jdgc.name ? jdgc.name : NO_DATA_HYPHEN}</span>
                    </div>
                  }
                >
                  <div className="fn-text-overflow gc_title">
                    <span className="gc_title-click"
                          onClick={this.gcTitleClick}>{jdgc.name ? jdgc.name : NO_DATA_HYPHEN}</span>
                  </div>
                </Tooltip>


                <div className="gc_jg_box">
                  <div className="gc_jg">
                    <div className="je_div">{jdgc.gczj ? jdgc.gczj : '0'}(万元)</div>
                    <div className="ms_div">工程造价</div>
                  </div>
                  <div className="gc_jg">
                    <div className="je_div">{jdgc.tzje ? '0' : '0'}(万元)</div>
                    <div className="ms_div">进度款拨付金额</div>
                  </div>
                </div>
                <div className="gc_ms">
                  <div className="col-md-7 ms_title">
                    <div>工程地址</div>
                    <div>工程类型</div>
                    <div>建设规模</div>
                    <div>报监日期</div>
                    <div>形象进度</div>
                    <div>建设单位</div>
                    <div>施工单位</div>
                    <div>监理单位</div>
                    <div>勘察单位</div>
                    <div>设计单位</div>
                    <div>图审单位</div>
                    <div>检测机构</div>
                  </div>
                  <div className="col-md-16 ms_content">

                    <Tooltip placement="right" overlay={
                      <div className="pop_ms">
                          <span>{jdgc.addr ? jdgc.addr : NO_DATA_HYPHEN}</span>
                        </div>
                      }>
                      <div className="fn-text-overflow">
                        {jdgc.addr ? jdgc.addr : NO_DATA_HYPHEN}
                      </div>
                    </Tooltip>
                    <div >{jdgc.gclx ? jdgc.gclx : NO_DATA_HYPHEN}</div>
                    <Tooltip placement="right" overlay={
                      <div className="pop_ms">
                          <span>{jdgc.jsgm ? jdgc.jsgm : NO_DATA_HYPHEN}</span>
                        </div>
                      }>
                      <div className="fn-text-overflow">
                        {jdgc.jsgm ? jdgc.jsgm : NO_DATA_HYPHEN}
                      </div>
                    </Tooltip>
                    <div>{jdgc.bjrq ? jdgc.bjrq : NO_DATA_HYPHEN}</div>

                    <Tooltip placement="right" overlay={
                      <div className="pop_ms">
                        <div>{jdgc.xxjd ? jdgc.xxjd : NO_DATA_HYPHEN}</div>
                      </div>
                    }>
                      <div className="fn-text-overflow">
                        <div>{jdgc.xxjd ? jdgc.xxjd : NO_DATA_HYPHEN}</div>
                      </div>
                    </Tooltip>

                    <Tooltip placement="right" overlay={
                      <div className="pop_ms">
                          <span>{jdgc.jsdw ? jdgc.jsdw : NO_DATA_HYPHEN}</span>
                        </div>
                      }>
                      <div className="fn-text-overflow">
                        {jdgc.jsdw ? <Link to={`/xytx/${jdgc.jsdwid}`}>{jdgc.jsdw}</Link> : NO_DATA_HYPHEN}
                      </div>
                    </Tooltip>
                    <Tooltip placement="right" overlay={
                      <div className="pop_ms">
                          <span>{jdgc.sgdw ? jdgc.sgdw : NO_DATA_HYPHEN}</span>
                        </div>
                      }>
                      <div className="fn-text-overflow">
                        {jdgc.sgdw ? <Link to={`/xytx/${jdgc.sgdwid}`}>{jdgc.sgdw}</Link> : NO_DATA_HYPHEN}
                      </div>
                    </Tooltip>
                    <Tooltip placement="right" overlay={
                      <div className="pop_ms">
                          <span>{jdgc.jldw ? jdgc.jldw : NO_DATA_HYPHEN}</span>
                        </div>
                      }>
                      <div className="fn-text-overflow">
                        {jdgc.jldw ? <Link to={`/xytx/${jdgc.jldwid}`}>{jdgc.jldw}</Link> : NO_DATA_HYPHEN}
                      </div>

                    </Tooltip>
                    <Tooltip placement="right" overlay={
                      <div className="pop_ms">
                          <span>{jdgc.kcdw ? jdgc.kcdw : NO_DATA_HYPHEN}</span>
                        </div>
                      }>
                      <div className="fn-text-overflow">
                        {jdgc.kcdw ? <Link to={`/xytx/${jdgc.kcdwid}`}>{jdgc.kcdw}</Link> : NO_DATA_HYPHEN}
                      </div>

                    </Tooltip>
                    <Tooltip placement="right" overlay={
                      <div className="pop_ms">
                          <span>{jdgc.sjdw ? jdgc.sjdw : NO_DATA_HYPHEN}</span>
                        </div>
                      }>

                      <div className="fn-text-overflow">
                        {jdgc.sjdw ? <Link to={`/xytx/${jdgc.sjdwid}`}>{jdgc.sjdw}</Link> : NO_DATA_HYPHEN}
                      </div>

                    </Tooltip>
                    <Tooltip placement="right" overlay={
                      <div className="pop_ms">
                          <span>{jdgc.tsdw ? jdgc.tsdw : NO_DATA_HYPHEN}</span>
                        </div>
                      }>

                      <div className="fn-text-overflow">
                        {jdgc.tsdw ? <Link to={`/xytx/${jdgc.tsdwid}`}>{jdgc.tsdw}</Link> : NO_DATA_HYPHEN}
                      </div>

                    </Tooltip>
                    <Tooltip placement="right" overlay={
                      <div className="pop_ms">
                          <span>{jdgc.jcdw ? jdgc.jcdw : NO_DATA_HYPHEN}</span>
                        </div>
                      }>
                      <div className="fn-text-overflow">
                        {jdgc.jcdw ? <Link to={`/xytx/${jdgc.jcdwid}`}>{jdgc.jcdw}</Link> : NO_DATA_HYPHEN}
                      </div>
                    </Tooltip>
                  </div>
                </div>

                <div className="col-md-12 ry">
                  <div className="col-md-6">
                    <img src={ry}/>
                  </div>
                  <div className="col-md-18">
                    <p className="ry_title">建设单位</p>
                    <Tooltip placement="right" overlay={
                      <div className="pop_ry_ms">
                          <p>姓名:{jdgc.jsdwr ? jdgc.jsdwr + '(法人)' : NO_DATA_HYPHEN}</p>
                          <p>联系电话:{jdgc.jsdwt ? jdgc.jsdwt : NO_DATA_HYPHEN}</p>
                        </div>
                      }>
                      <p className="ry_name">
                        {jdgc.jsdwr ? jdgc.jsdwr : NO_DATA_HYPHEN}
                      </p>
                    </Tooltip>
                  </div>
                </div>

                <div className="col-md-12 ry">
                  <div className="col-md-6">
                    <img src={ry}/>
                  </div>
                  <div className="col-md-18">
                    <p className="ry_title">施工单位</p>
                    <Tooltip placement="right" overlay={
                      <div className="pop_ry_ms">
                          <p>姓名:{jdgc.sgdwr ? jdgc.sgdwr + '(项目经理)' : NO_DATA_HYPHEN}</p>
                          <p>联系电话:{jdgc.sgdwt ? jdgc.sgdwt : NO_DATA_HYPHEN}</p>
                        </div>
                      }>
                      <p className="ry_name">
                        {jdgc.sgdwr ? jdgc.sgdwr : NO_DATA_HYPHEN}
                      </p>
                    </Tooltip>
                  </div>
                </div>

                <div className="col-md-12 ry">
                  <div className="col-md-6">
                    <img src={ry}/>
                  </div>
                  <div className="col-md-18">
                    <p className="ry_title">监理单位</p>
                    <Tooltip placement="right" overlay={
                    <div className="pop_ry_ms">
                      <p>姓名:{jdgc.jldwr ? jdgc.jldwr + '(总监)' : NO_DATA_HYPHEN}</p>
                      <p>联系电话:{jdgc.jldwt ? jdgc.jldwt : NO_DATA_HYPHEN}</p>
                    </div>
                    }>
                      <p className="ry_name">
                        {jdgc.jldwr ? jdgc.jldwr : NO_DATA_HYPHEN}
                      </p>
                    </Tooltip>
                  </div>
                </div>

                <div className="col-md-12 ry">
                  <div className="col-md-6">
                    <img src={ry}/>
                  </div>
                  <div className="col-md-18">
                    <p className="ry_title">勘察单位</p>
                    <Tooltip placement="right" overlay={
                    <div className="pop_ry_ms">
                      <p>姓名:{jdgc.kcdwr ? jdgc.kcdwr + '(负责人)' : NO_DATA_HYPHEN}</p>
                      <p>联系电话:{jdgc.kcdwt ? jdgc.kcdwt : NO_DATA_HYPHEN}</p>
                    </div>
                    }>
                      <p className="ry_name">
                        {jdgc.kcdwr ? jdgc.kcdwr : NO_DATA_HYPHEN}
                      </p>
                    </Tooltip>
                  </div>
                </div>

                <div className="col-md-12 ry">
                  <div className="col-md-6">
                    <img src={ry}/>
                  </div>
                  <div className="col-md-18">
                    <p className="ry_title">设计单位</p>
                    <Tooltip placement="right" overlay={
                    <div className="pop_ry_ms">
                      <p>姓名:{jdgc.sjdwr ? jdgc.sjdwr + '(总监)' : NO_DATA_HYPHEN}</p>
                      <p>联系电话:{jdgc.sjdwt ? jdgc.sjdwt : NO_DATA_HYPHEN}</p>
                    </div>
                    }>
                      <p className="ry_name">
                        {jdgc.sjdwr ? jdgc.sjdwr : NO_DATA_HYPHEN}
                      </p>
                    </Tooltip>
                  </div>
                </div>
                <div className="col-md-12 ry">
                  <div className="col-md-6">

                  </div>
                  <div className="col-md-18" style={{marginTop:'10px'}}>

                  </div>
                </div>
              </div>
            </Col>
            <Col xs={24} md={16}>
              <Tabs defaultActiveKey="0" type="small">
                {timeline}
                {xm}
                {spjk}
                {ts}
                {zbgc}
                {ht}
                {sgxk}
              </Tabs>
              <div className="col_1" style={{height:244,marginTop:15}}>
                <div className="title title_3">违规处理</div>
                <div className="table_div">
                  <div className="jxxx-table-div ">
                    <ReactEcharts
                      option={this.state.wgOption}
                    />
                  </div>
                </div>
              </div>
            </Col>
          </Row>
        </Grid>

        <Dialog title={this.state.dialogTitle} width={this.state.dialogWidth}
                onCancel={this.hideModal}
                onOk={this.okModal}
                visible={this.state.showDialog}
                transitionName="slideDown">
          {this.state.showDialogLx}
        </Dialog>
      </div >
    );
  }
}

export default withRouter(PageXmmx);
